<template>
    <view>
        <view class="levellist">
            <view class="levelmain">
                <block v-for="(item, index) in companyrolelist" :key="index">
                    <view :class="'levelitem  ' + (curNav == item.id ? 'selected' : '')" @tap="selectNav" :data-index="index" :data-id="item.id">
                        <view>{{ item.title }}</view>
                        <view>￥{{ item.money }}</view>
                        <view>简历{{ item.notenum }}次</view>

                        <view>职位{{ item.jobnum }}数</view>
                    </view>
                </block>
            </view>
        </view>

        <!-- 去充值模块 -->
        <view class="goblance">
            <view class="txt_t">
                <button @tap="pay" data-money="500">购买企业套餐</button>
            </view>
        </view>
        <!-- 充值余额成功弹出层 -->

        <view class="scorelist">
            <view class="title">
                <view>编号</view>
                <view>职位/简历</view>
                <view>剩余(职位/简历)</view>
                <view>时间</view>
            </view>
            <view class="list" v-for="(item, index) in companyrecordlist" :key="index">
                <view>{{ item.id }}</view>

                <view>{{ item.type == 0 ? '充' : '消费' }}({{ item.jobnum }}/{{ item.notenum }}/{{ item.topnum }}){{ item.mark }}</view>

                <view>{{ item.totaljobnum }}/{{ item.totalnotenum }}/{{ item.totaltopnum }}</view>

                <view>{{ item.create_time }}</view>
            </view>
        </view>
    </view>
</template>

<script>
//recharge.js
import { Companyrole } from '../../model/companyrole-model.js';
var companyrole = new Companyrole();
import { Order } from '../../model/order-model.js';
var order = new Order();
import { Pay } from '../../model/pay-model.js';
var pay = new Pay();
var color;
var sucmoney;
var money = 0;
var b = 0;
var yajinid = 0;
export default {
    data() {
        return {
            id: 0,
            mymoney: 0,
            disabled: false,
            curNav: 1,
            curIndex: 0,
            cart: [],
            cartTotal: 0,
            lockhidden: true,
            yajinhidden: true,
            sucmoney: 424,
            color: 'limegreen',
            nocancel: false,
            tajinmodaltitle: '押金充值',
            yajinmodaltxt: '去充值',
            yajinmoney: 0,
            yajintxt: '您是否确定充值押金299元？押金充值后可以在摩拜单车App全额退款',
            companyrolelist: '',
            companyrecordlist: ''
        };
    }, //页面加载模块
    onLoad: function () {
        this.onLoadClone3389();
    },
    methods: {
        //页面加载模块
        onLoadClone3389: function () {
            uni.setNavigationBarTitle({
                title: '购买企业套餐'
            });
            var that = this;
            var ctoken = uni.getStorageSync('ctoken');
            var params = {
                ctoken: ctoken
            };
            companyrole.GetCompanyrolelist((data) => {
                that.setData({
                    companyrolelist: data.companyrolelist,
                    companyrecordlist: data.companyrecordlist
                });
            }, params);
        },

        //充值金额分类渲染模块
        selectNav(event) {
            var that = this;
            let id = event.currentTarget.dataset.id;

            // console.log(id);
            that.id = id;
            var index = parseInt(event.currentTarget.dataset.index);
            var b = parseInt(event.currentTarget.dataset.money);
            self = this;
            this.setData({
                curNav: id,
                curIndex: index
            });
        },

        buttonEventHandle: function (event) {},

        pay: function (e) {
            var that = this;
            var pid = that.id;
            if (pid > 0) {
                var ctoken = uni.getStorageSync('ctoken');
                var params = {
                    pid: pid,
                    type: 'companyrole',
                    ctoken: ctoken
                };
                order.Roleorder((data) => {
                    pay.execPay(data.order_id, (res) => {
                        that.onLoadClone3389({});

                        /*
            wx.navigateTo({
              url: '/pages/companycenter/index',
            })
            */
                    });
                }, params);
            } else {
                uni.showModal({
                    title: '提示',
                    content: '请选择企业套餐',
                    showCancel: false
                });
                return;
            }
        },

        //去充值功能模块
        goblance: function (event) {
            money += b;
            this.setData({
                lockhidden: false,
                mymoney: money,
                sucmoney: b
            });
        },

        confirm: function () {
            this.setData({
                lockhidden: true
            });
        },

        //押金功能模块
        yajin: function (event) {
            this.setData({
                yajinhidden: false
            });
        },

        yajincancel: function (event) {
            this.setData({
                yajinhidden: true
            });
        },

        yajinconfirm: function (event) {
            if (yajinid == 0) {
                yajinid = 1;
                this.setData({
                    nocancel: true,
                    yajintxt: '您已成功充值押金299元',
                    tajinmodaltitle: '充值成功',
                    yajinmodaltxt: '完成'
                });
            } else {
                yajinid = 0;
                this.setData({
                    nocancel: false,
                    yajinhidden: true,
                    yajinmoney: 299
                });
            }
            this.setData({
                nocancel: true
            });
        }
    }
};
</script>
<style>
page {
    background: #fff;
}

.levellist {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 10rpx;
    background: #fff;
}
.levellist .levelmain {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.levellist .levelitem {
    width: 220rpx;
    height: 260rpx;
    border-radius: 10rpx;
    border: 1rpx solid yellow;
    display: flex;
    flex-direction: column;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
}
.levellist .levelitem view:nth-child(1) {
    width: 220rpx;
    height: 80rpx;
    background: #fbd74d;
    color: #734500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.levellist .levelitem view:nth-child(2) {
    font-weight: 600;
    font-size: 1.2rem;
    color: #734500;
    width: 220rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.levellist .levelitem view:nth-child(3) {
    font-size: 0.7rem;
    color: #734500;
    width: 220rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.levellist .levelitem view:nth-child(4) {
    font-size: 0.7rem;
    color: #734500;
    width: 220rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.levellist .levelitem view:nth-child(5) {
    font-size: 0.7rem;
    color: #734500;
    width: 220rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.levellist .levelitem view:nth-child(6) {
    font-size: 0.7rem;
    color: red;
    width: 220rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.selected {
    background: #fdf1db;
}

/*充值金额分类*/
.balance-demo {
    padding: 40rpx 0 30rpx 0;

    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.userlevel {
    width: 300rpx;
    height: 50rpx;
    background: yellow;
    font-size: 0.8rem;
}

.balance-demo button {
    display: inline-block;
    width: 300rpx;
    height: 320rpx;
    margin: 10rpx 35rpx;
    background-color: transparent;
    border: 1rpx solid yellow;
}
.balance-demo button[data-id='5'] {
    padding-top: 30rpx;
}
.balance-demo button.selected {
    background-color: yellow;
    color: #fff;
}
.balance-demo button text {
    display: block;
    line-height: 60rpx;
}
.balance-demo button .botton {
    color: #808080;
}
.balance-demo button text.selected {
    color: #fff;
}
.other-button-hover {
    background-color: yellow;
}
/*<!--去充值模块-->*/
.goblance {
    width: 100%;
    box-sizing: border-box;
    margin-top: 80rpx;
    padding: 0 30rpx 0 30rpx;
    background-color: #fff;
    text-align: center;
}

.goblance .txt_t {
    color: #808080;
    background-color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: row;
}
.goblance navigator {
    display: inline-block;
    color: #0033ff;
}
.goblance button[disabled='false'] {
    color: #fff;
}
.goblance button {
    color: #734500;
    margin: 20rpx 15rpx;
    background-color: #fbd74d;
    font-size: 0.8rem;
    width: 500rpx;
    height: 100rpx;
    line-height: 100rpx;
    border: 0rpx solid #fbd74d;
}

.scorelist {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scorelist .title {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.7rem;
    border-bottom: 1rpx dotted #808080;
    padding-top: 25rpx;
    padding-bottom: 25rpx;
}
.scorelist .title view {
    width: 20%;
    text-align: center;
    font-weight: 600;
}

.scorelist .list {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.7rem;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx dotted #808080;
}
.scorelist .list view {
    width: 20%;
    text-align: center;
}
</style>
